@atlaskit/theme

Colors

The @atlaskit/theme package provides a set of predefined colors that can be used to maintain consistency across your application. The colors are organized by their usage and intensity.

const { colors } = require('@atlaskit/theme');

const primaryColor = colors.B400;
console.log(primaryColor); // Outputs: #0052CC

Spacing

The package offers a spacing utility based on a grid system. This helps in maintaining consistent spacing throughout the application.

const { gridSize } = require('@atlaskit/theme');

const spacing = gridSize() * 2;
console.log(spacing); // Outputs: 16 (assuming gridSize is 8)

Typography

Typography utilities are provided to ensure consistent font sizes and families across the application. These utilities can be used to style text elements in a uniform manner.

const { fontSize, fontFamily } = require('@atlaskit/theme');

const headingStyle = {
  fontSize: fontSize.heading,
  fontFamily: fontFamily.heading
};
console.log(headingStyle); // Outputs: { fontSize: '24px', fontFamily: 'Arial, sans-serif' }

Theming

The @atlaskit/theme package includes a ThemeProvider component and a useTheme hook to apply and access custom themes throughout your application. This allows for dynamic theming and easy customization.

const { ThemeProvider, useTheme } = require('@atlaskit/theme');

const MyComponent = () => {
  const theme = useTheme();
  return <div style={{ color: theme.colors.text }}>Hello, World!</div>;
};

const App = () => (
  <ThemeProvider theme={{ colors: { text: '#000000' } }}>
    <MyComponent />
  </ThemeProvider>
);